<template>
	<div>
		<el-form>
			<div class="addemployye">
				<div style="width: 100px;font-weight: bold;">基础信息</div>
				<el-form-item label="员工手机号" style="margin-left: 150px;margin-top: 20px;">
					<el-input disabled v-model="emps.phone" style="width: 300px;margin-left: 50px;"
						placeholder="输入手机号" />
					<span class="error-message" v-if="errors.phone">{{ errors.phone }}</span>
				</el-form-item>
				<el-form-item label="员工姓名" style="margin-left: 165px;margin-top: 20px;">
					<el-input v-model="emps.user_name" style="width: 300px;margin-left: 50px;" placeholder="输入员工姓名" />
					<span class="error-message" v-if="errors.user_name">{{ errors.user_name }}</span>
				</el-form-item>
				<el-form-item label="初始密码" style="margin-left: 165px;margin-top: 20px;">
					<el-input v-model="emps.password" style="width: 300px;margin-left: 50px;"
						:type="addPassFlag ? 'text' : 'password'" placeholder="输入密码">
						<template #suffix>
							<span @click="addPassFlag = !addPassFlag">
								<el-icon v-if="addPassFlag">
									<View />
								</el-icon>
								<el-icon v-else>
									<Hide />
								</el-icon>
							</span>
						</template>
					</el-input><br />
					<span class="error-message" v-if="errors.user_name">{{ errors.user_name }}</span>
				</el-form-item>
				<el-form-item label="头像" style="margin-left: 190px;">
					<div style="display: flex; align-items: center;margin-left: 50px;">
						<!-- 显示头像 -->
						<el-image :src="'http://localhost:8089/property/download/'+emps.user_avatar"
							style="width: 100px; height: 100px; border-radius: 50%; border: 2px solid #dcdfe6; margin-right: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.2);"
							fit="cover">
						</el-image>
						<!-- 上传按钮 -->
						<el-upload class="avatar-uploader" action="http://localhost:8089/property/upload"
							:show-file-list="false" :on-success="handleAvatarSuccess" style="display: inline-block;">
							<el-button type="primary" icon="el-icon-upload2">修改头像</el-button>
						</el-upload>
					</div>
				</el-form-item>

				<el-form-item label="备注" style="margin-left: 195px;">
					<el-input v-model="emps.user_remark" style="width: 240px;margin-left: 45px;" :rows="2"
						type="textarea" placeholder="输入备注" />
				</el-form-item>
				<el-form-item label="员工角色" style="margin-left: 165px;">
					<div v-for="item in rolelist.value" :key="item.role_id" class="ygjs" @click="selectRole(item)"
						:class="{ 'selected': item.role_id === selectedRoleId }">
						<span class="JueSe" :style="{ color: item.role_id === selectedRoleId }">
							{{ item.role_name }}</span>
						<span class="ChaJueSe">查看</span>
					</div>
				</el-form-item>
				<div class="addJueSe">
					<div>
						<img src="../img/添加角色.png" width="20px" />
					</div>
					<div @click="navigateToJueSeList">添加角色</div>
				</div>
			</div>
			<div class="AddChaoZuo" style="">
				<div class="qxbtu">
					<el-button class="qx">取消</el-button>
					<el-button class="qd" @click="UpdUser">确定</el-button>
				</div>
			</div>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
	import { ElMessage } from 'element-plus'
	import { reactive, ref, onMounted } from 'vue';
	import $http from '../router/AxiosApi';
	import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue'
	import type { UploadInstance } from 'element-plus'
	import { useRouter, useRoute } from 'vue-router';

	const addPassFlag = ref(false)//图标显示标识
	// 使用URLSearchParams来获取查询参数中的employeeId
	const searchParams = new URLSearchParams(window.location.search);
	const employeeId = searchParams.get("employeeId");
	console.log(employeeId)
	const emps = reactive({
		user_id: '',
		phone: '',
		user_name: '',
		password: '',
		user_remark: '',
		js: '',
		user_avatar:''
	})
	
	const errors = reactive({
		phone: '',
		user_name: '',
		password: '',
	});
	
	const validateForm = () => {
		errors.phone = emps.phone.trim() === '' ? '手机号不能为空' : '';
		errors.user_name = emps.user_name.trim() === '' ? '姓名不能为空' : '';
		errors.password = emps.password.trim() === '' ? '密码不能为空' : '';
		// 可以添加更多验证逻辑  
	};
	$http.post(`/ChaUseridList/${employeeId}`).then((res) => {
		const fetchedData = res.data;
		console.log("zz", fetchedData)
		emps.phone = fetchedData.data[0].phone
		emps.user_name = fetchedData.data[0].user_name
		emps.password = fetchedData.data[0].password
		emps.user_remark = fetchedData.data[0].user_remark
		selectedRoleId.value = fetchedData.data[0].userRoleEntity.role_id
		emps.user_avatar=fetchedData.data[0].user_avatar
		console.log("fz", emps)
	})

	const selectedRoleId = ref(null);
	const rolelist = reactive([]);
	$http.post('RoleList').then((res) => {
		rolelist.value = res.data.data;
		console.log('Role List:', rolelist.value);
	})
	const selectRole = (selectedRole) => {
		console.log('Selected Role:', selectedRole);
		selectedRoleId.value = selectedRole.role_id;
		console.log('Role ID:', selectedRole.role_id);
	}
	const UpdUser = () => {
		validateForm();
		emps.user_id=employeeId
		$http.put('UpdUser', emps).then((res) => {
			console.log("修改后的数据:",emps )
			Object.assign(emps, res.data)
		})
		const roleId = selectedRoleId.value;
		$http.put('UpdUserRole',{role_id:roleId,user_id:employeeId}).then((res)=>{
			Object.assign({role_id:roleId,user_id:employeeId}, res.data)
		})
		router.push({ name: 'EmpList' });
		ElMessage({
			message: '修改员工信息成功',
			type: 'success',
			plain: true,
		})
	}

	const router = useRouter()
	const dialogImageUrl = ref('')
	const dialogVisible = ref(false)
	const disabled = ref(false)
	const fileList = ref<UploadInstance>()

	// 上传成功后更新头像地址
	const handleAvatarSuccess = (response, file, fileList) => {
		// 上传成功后更新头像地址
		const formData3 = new FormData();
		formData3.append('file', file.raw); // 'avatar' 是后端接收文件的字段名
		console.log("头像名", file.raw.name)
		fetch('http://localhost:8089/property/upload', {
			method: 'POST',
			body: formData3
		})
			.then(response => response.json())
			.then(data => {
				if (data.code === 500) {
					console.log("错误")
				} else {
					console.log("成功")
				}
			})
			.catch(error => {
				console.log(error)
			});
		emps.user_avatar = file.raw.name;
		console.log("上传完成", emps.user_avatar)
	};
	const activeKey = ref(null);

	const handleClick = (key) => {
		activeKey.value = key; // 使用 .value 更新 ref 值
	};

	const navigateToJueSeList = () => {
		router.push({ name: 'JueSeList' });
	}
</script>

<style scoped>
	.addemployye {
		margin-left: 20px;
		width: 1300px;
		height: 100%;
		border-radius: 10px;
		padding: 10px;
		background-color: white;
	}
	.error-message {
		color: red;
		margin-left: 10px;
	}
	.ygjs {
		width: 200px;
		height: 50px;
		background-color: #F5F5F5;
		cursor: pointer;
		margin-left: 45px;
		margin-right: 25px;
		position: relative;
		/* 设置相对定位，以便绝对定位勾号图标 */
		padding-right: 20px;
		/* 留出空间来放置勾号图标 */
		margin-top: 10px;
		border-radius: 5px;
	}

	.selected {
		background-color: white;
		border: 2px solid #00c36d;
		/* 背景颜色变绿 */
	}

	.selected .JueSe {
		color: #00c36d;
		/* 文字颜色变绿 */
	}

	.ygjs span.JueSe {
		/* 示例：设置不同的文本颜色 */
		cursor: pointer;
		/* 保持鼠标悬停时的指针样式 */
		position: relative;
		left: 20px;
		font-weight: bold;
	}

	.ygjs span.ChaJueSe {
		/* 为“查看”span设置特定的样式，如果需要的话 */
		color: #999999;
		/* 示例：设置不同的文本颜色 */
		cursor: pointer;
		/* 保持鼠标悬停时的指针样式 */
		position: relative;
		left: 100px;
	}

	.JueSe {
		margin-left: -100px;
		line-height: 50px;
	}

	.addJueSe {
		width: 200px;
		margin-left: 275px;
		display: flex;
		/* 使用 Flexbox 布局 */
		align-items: center;
		/* 垂直居中对齐 */
	}

	.addJueSe>div {
		display: flex;
		/* 让内部div元素也成为flex项 */
		align-items: center;
		/* 垂直居中对齐 */
		color: #475487;
		cursor: pointer;
	}

	.qxbtu {
		width: 250px;
		margin-left: 1000px;
		position: relative;
		top: 10px;
	}

	.qx {
		width: 90px;
		background-color: #F5F5F5;
	}

	.qd {
		width: 90px;
		background-color: #00c36d;
		color: white;
	}

	.AddChaoZuo {
		width: 1320px;
		border-radius: 10px;
		height: 50px;
		margin-left: 20px;
		background-color: white;
		margin-top: 25px;
	}
</style>